<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>demo</title>
	<meta name="keywords" content=""/>
	<meta name="description" content=""/>
	<meta name="viewport" content="width=device-width"/>
	<link rel="shortcut icon" href="img/touchicon.png"/>
	<link rel="stylesheet" href=""/>
	<style type="text/css">
		.clearfix:after{content:'.';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
		.clearfix{zoom:1;}

	</style>
</head>
<body>
	<input type="button" value="Next" id="btn">
	<h2>这是第<span id="num">0</span>页</h2>
	<script>
		var btn = document.getElementById('btn');
		var num = document.getElementById('num');
		btn.onclick = (function(){
			var i = 0;
			function nextPage(){
				i++;
				var data = {pageNum:i};  //对象用于添加到history对象下，保存数据
				var s='#'+i;
				history.pushState(data,null,s);  //调用history.pushState方法，添加记录到history中
				num.innerHTML = i;
			}
			return nextPage;
		})();
		window.onpopstate = function(e){  //e 为onpopstate获取的pushState保存到历史记录中的对象
			var pageI = e.state;
			if (pageI==null) {
				num.innerHTML = 0;
			} else
				num.innerHTML = pageI.pageNum;
		}
		window.onload = function(){
			var pageIndex;
			if(location.hash==''){
				pageIndex = 0;
			}else{
				pageIndex = myStr(location.hash);
			}
			num.innerHTML = pageIndex;
		}
		function myStr(str){
			return str.slice(1);
		}
	</script>
</body>
</html>